<template>
    <div style="text-align: center;background-color: #cebdee;height: 100%;padding: 0px;margin: 0px;">

        <DateTimes></DateTimes>

        <el-descriptions  title="个人中心" :column="2" size="40" border style="color: #ffffff; margin-top: 17px">
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-custom"></i>
                    账号
                </template>
                {{user.no}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    电话
                </template>
                {{user.phone}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    性别
                </template>
                <el-tag
                        :type="user.sex == '1' ? 'primary' : 'danger'"
                        disable-transitions>

                    <i :class="user.sex == '1' ?'el-icon-male':'el-icon-female'"></i>
                                {{user.sex == '1' ?"男":"女"}}
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    角色
                </template>
                <el-tag
                        :type="user.roleId == '0' ? 'danger' : (user.roleId == '1' ? 'success' : 'primary')"
                        disable-transitions>{{user.roleId== '0' ?"超级管理员":(user.roleId== '1' ? "管理员":"用户")}}</el-tag>

            </el-descriptions-item>
        </el-descriptions>

    </div>
</template>

<script>
    import DateTimes from "./utils/DateTimes";
    export default {
        name: "Home",
        components: {DateTimes},
        data() {
            return {
                user:{}
            }
        },
        computed:{
        },
        methods:{
            init(){
                this.user = JSON.parse(sessionStorage.getItem('CurUser'))
            }
        },
        created(){
            this.init()
        }
    }
</script>

<style scoped>
    .el-descriptions{
        width:90%;

        margin: 0 auto;
        text-align: center;
    }
</style>